<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Node.js tutorial: The WHATWG URL parser - The Node Beginner Blog</title>

<meta property="og:site_name" content="The Node Beginner Blog">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="fb:profile_id" content="1144782312">
<meta property="fb:app_id" content="150404395523663">
<meta property="article:author" content="https://www.facebook.com/NodeBeginner/">
<meta property="article:tag" content="Node.js">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="Programming">
<meta property="article:tag" content="Software">
<meta property="article:tag" content="Tutorial">
<meta property="fb:pages" content="319963981788483">
<meta property="og:url" content="https://www.nodebeginner.org/blog/post/nodejs-tutorial-whatwg-url-parser/">
<meta property="og:title" content="Node.js tutorial: The WHATWG URL parser">
<meta property="og:image" content='https://www.nodebeginner.org/blog/images/the-node-beginner-project-default-og-1200x630.jpg'>
<meta property="og:image:secure_url" content='https://www.nodebeginner.org/blog/images/the-node-beginner-project-default-og-1200x630.png'>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content='Node.js 8.0 gives us the first stable release of the WHATWG URL parser. This tutorial explains it in detail!'>


<link rel="stylesheet" href="https://www.nodebeginner.org/blog/css/slim.css">
<link rel="stylesheet" href="https://www.nodebeginner.org/blog/css/highlight.min.css">


<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/favicon.ico">


<link href="" rel="alternate" type="application/rss+xml" title="The Node Beginner Blog" />

</head>

<body>
  <div class="container">
    <div class="header">
  <h1 class="site-title"><a href="https://www.nodebeginner.org/blog/">The Node Beginner Blog</a></h1>
  <p class="site-tagline">Your regularly updated tutorial resource for all things Node.js.</p>

  
</div>
    <div class="content">
      <div class="posts">
        <div class="post">
          <h2 class="post-title"><a href="https://www.nodebeginner.org/blog/post/nodejs-tutorial-whatwg-url-parser/">Node.js tutorial: The WHATWG URL parser</a></h2>
          <span class="post-date">Jun 4, 2017 </span>
          <div class="post-content">
            <p>The <a href="/blog/post/node-v8_0_0-released/">recently released version 8.0.0</a> of Node.js made the experimental implementation of the WHATWG URL parser from Node.js v7.0.0 non-experimental and fully supported. Here&rsquo;s what you can use it for.</p>

<p>A URL like <code>http://www.example.com/foo?bar=1#main</code> consists of several different parts - e.g., the <strong>host</strong> part (<code>www.example.com</code>) or the <strong>search</strong> (<code>?bar=1</code>, often called <em>query string</em>).</p>

<p>When writing Node.js web server software, you regularly need to access or even manipulate those different parts. While this can be achieved by working with the URL as a simple string, splitting this string into its different logical parts manually with substring operations or regular expressions is very cumbersome. A dedicated library makes this very easy.</p>

<p>You have already been able to parse URLs in Node.js before, via the <code>url</code> module, but this provided a very Node.js specific implementation which is now considered legacy.</p>

<p>The <code>url</code> module now provides an additional implementation which implements the standardized WHATWG URL API, making the url-parsing code of Node.js work identical to the way that web browsers are parsing URLs.</p>

<p>The new API is based on the <code>URL</code> object, which makes the different parts of a URL available as object attributes:</p>

<pre><code>var URL = require('url').URL;
var myURL = new URL('http://www.example.com/foo?bar=1#main');

console.log(myURL.host);

// prints 'www.example.com'

</code></pre>

<p>Here is an overview of all the different parts of an URL and how the according <code>URL</code> object attribute is named:</p>

<pre><code>&quot;  https:   //  user : pass @ sub.host.com : 80   /p/a/t/h  ?  query=string   #hash &quot;
│          │  │      │      │   hostname   │port│          │                │       │
│          │  │ user-│ pass-├──────────────┴────┤          │                │       │
│ protocol │  │ name │ word │        host       │          │                │       │
├──────────┴──┼──────┴──────┼───────────────────┤          │                │       │
│   origin    │             │       origin      │ pathname │     search     │ hash  │
├─────────────┴─────────────┴───────────────────┴──────────┴────────────────┴───────┤
│                                    href                                           │
└───────────────────────────────────────────────────────────────────────────────────┘
</code></pre>

<p>The <code>URL</code> object representation of a URL can also be used to change those parts:</p>

<pre><code>var URL = require('url').URL;
var myURL = new URL('http://www.example.com/foo?bar=1#main');

myURL.protocol = 'https';

myURL.search = '?newBar=2';

console.log(myURL.href);

// prints 'https://www.example.com/foo?newBar=2#main'
</code></pre>

<p>Learn more about working with URLs and <a href="https://www.nodebeginner.org/#a-basic-http-server">building your own web server</a> application with Node.js with <strong>The Node Beginner Book</strong> - the first part of this <a href="https://www.nodebeginner.org/">extensive Node.js tutorial</a> is available for free!</p>
          </div>
        </div>
        <div class="pagination">
          
            <a class="btn next " href="https://www.nodebeginner.org/blog/post/nodejs-tutorial-optimizing-code-performance-using-async/">Next</a>
          
          
            <a class="btn previous " href="https://www.nodebeginner.org/blog/post/node-v8_0_0-released/">Prev</a>
          
        </div>
      </div>
    </div>
    
    <div class="footer">
  
  <p>Copyright (c) 2017 Manuel Kiessling</p>
  
</div>

  </div>
  <script src="https://www.nodebeginner.org/blog/js/slim.js"></script>
  <script src="https://www.nodebeginner.org/blog/js/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
  <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-2127388-6', 'auto');
ga('send', 'pageview');

</script>

</body>

</html>
